<template>
	<view>
		<view class="box menu_content_box_page">
			<view class="search_bg_area">
				<view class="flex_box aic">
					<view class="item">
						<view class="search_box">
							<image :lazy-load="true" src="/static/icon_search.png" class="icon_search_pos"></image>
							<view class="ipt_search" v-model="searchWord" @tap="toSearch">请输入您想搜索的挖机型号</view>
						</view>
					</view>
					<view class="pl20 pr30 fs28 cor_fff" @tap="toSearch">搜索</view>
				</view>

			</view>

			<view class="re" style="z-index: 2;top: -159rpx;">
				<view class="pl16 pr16">
					<view class="re">
						<!--轮播图-->
						<swiper class="swiper_focus" :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="interval" :duration="duration" :indicator-color="indicatorColor"
							:indicator-active-color="indicatorActiveColor" :circular="circular"
							@change="onswiperChange">
							<swiper-item v-for="(item ,index) in adList" :key="index" @tap="nato(item)">
								<image :lazy-load="true"  :src="item.imgUrl" mode="widthFix"></image>
							</swiper-item>
						</swiper>
						<!--轮播图-->
					</view>
					<view class="mt45 flex_box aic">
						<view class="item tac" @tap="addSell">
							<view>
								<image :lazy-load="true"  src="/static/icon_nav_1.png" class="img1"></image>
							</view>
							<view class="mt15 fs26 cor_000">出售挖机</view>
						</view>
						<view class="item tac" @tap="toPeijian">
							<view>
								<image :lazy-load="true"  src="/static/icon_nav_2.png" class="img1"></image>
							</view>
							<view class="mt15 fs26 cor_000">配件</view>
						</view>
						<view class="item tac" @tap="toRepair">
							<view>
								<image :lazy-load="true"  src="/static/icon_nav_3.png" class="img1"></image>
							</view>
							<view class="mt15 fs26 cor_000">维修</view>
						</view>
						<view class="item tac" @tap="toDatabase">
							<view>
								<image :lazy-load="true"  src="/static/icon_nav_4.png" class="img1"></image>
							</view>
							<view class="mt15 fs26 cor_000">资料库</view>
						</view>
						<view class="item tac" @tap="toTrailerList">
							<view>
								<image :lazy-load="true"  src="/static/icon_nav_5.png" class="img1"></image>
							</view>
							<view class="mt15 fs26 cor_000">联系拖车</view>
						</view>
					</view>

					<view class="pt40">
						<view class="df fldr fw jcsb">

							<view class="shop_price_item" v-for="(item, index) in excavatorList" :key="index"
								@tap="toProduct(item.id)">
								<view class="re">
									<image :lazy-load="true"  :src="item.imgUrl" class="img2 vt"></image>
								</view>
								<view class="content_area">
									<view class="fs26 lh36 ell">{{item.name}}</view>
									<view class="fs26 lh36 ell">{{item.pYear}}年 {{item.hours}}小时</view>
									<view class="mt25 flex_box aic">
										<view class="item">
											<view class="fs30 fwb cor_F23"><text class="fs34">￥{{item.price}}</text>万
											</view>
										</view>
										<image :lazy-load="true"  src="/static/icon_location.png" class="img3"></image>
										<view class="ml5 fs24 fwb cor_808">{{item.place}}</view>
									</view>
								</view>
							</view>

						</view>

					</view><!-- pl16 pr16 -->
				</view>

				<!-- 底部菜单栏 -->
				<view class="bottom_nav flex_box">
					<view class="item">
						<view>
							<image :lazy-load="true"  src="../../static/menu_1_2.png" class="img4 vt"></image>
						</view>
						<view class="mt10 cor_F23">首页</view>
					</view>
					<view class="re item" @tap="toJobs">
						<image :lazy-load="true"  src="../../static/menu_3_1.png" class="recruit_img_pos"></image>
						<view class="mt50">求职招聘</view>
					</view>
					<view class="item" @tap="toPersonalCenter">
						<view>
							<image :lazy-load="true"  src="../../static/menu_2_1.png" class="img4 vt"></image>
						</view>
						<view class="mt10">我的</view>
					</view>
				</view>

			</view><!-- box -->
		</view>
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		mainPageApi,
		getPageDiggerApi,
		testApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				adList: [{
					imgUrl: '',
					jumpId: '',
					navType: ''
				}],
				excavatorList: [{
					hours: 0,
					id: '',
					imgUrl: '',
					name: '',
					pYear: '',
					place: '',
					price: 0
				}],
				autoplay: true,
				interval: 3000,
				duration: 300,
				indicatorDots: false,
				circular: true,
				indicatorColor: '#fff',
				indicatorActiveColor: '#0692ff',
				autoplayNews: true,
				intervalNews: 3000,
				durationNews: 300,
				searchWord: '',
				currentPage: 1,
				hasNextPage: false,
				totalPage: 1,
				pageSize: 10,
			}
		},

		onLoad() {
			//plus.screen.lockOrientation('portrait-primary'); //锁定应用竖屏
			//this.test();
			this.getMain();
		},
		onReachBottom() {
			this.currentPage = parseInt(this.currentPage) + 1;
			this.getPageDigger();
		},
		methods: {
			onswiperChange() {

			},
			addSell() {
				uni.navigateTo({
					url: '/pages/car_sales_consultation/car_sales_consultation'
				})
			},

			getMain() {
				let that = this;
				showLoading('加载中');
				mainPageApi({
					pageIndex: this.currentPage,
					pageSize: this.pageSize
				}).then(res => {
					that.adList = res.data.adList;
					that.currentPage = res.data.dataPage.currentPage
					that.hasNextPage = res.data.dataPage.hasNextPage
					that.totalPage = res.data.dataPage.totalPage
					that.excavatorList = res.data.dataPage.data;

					hideLoading();
				}).catch(err => {
					console.log(err)
					hideLoading();
					toast(err.msg)
				})
			},


			getPageDigger() {
				let that = this;
				showLoading('加载中');
				getPageDiggerApi({
					pageIndex: this.currentPage,
					pageSize: this.pageSize
				}).then(res => {
					that.currentPage = res.data.currentPage;
					for (let i in res.data.data) {
						that.excavatorList.push(res.data.data[i]);
					}
					if (res.data.data.length == 0) {
						if (parseInt(res.data.currentPage) > 1) {
							that.currentPage = parseInt(that.currentPage) - 1;
						}
					}
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},

			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},

			toProduct(id) {
				uni.navigateTo({
					url: '/pages/purchase_information_details/purchase_information_details?id=' + id
				})
			},

			toJobs() {
				uni.navigateTo({
					url: '/pages/job_recruitment/job_recruitment'
				})
			},

			toPersonalCenter() {
				uni.navigateTo({
					url: '/pages/personal_center/personal_center'
				})
			},

			toPeijian() {
				uni.navigateTo({
					url: '/pages/parts/parts'
				})
			},

			//拖车列表
			toTrailerList() {
				uni.navigateTo({
					url: '/pages/trailer_list/trailer_list'
				})
			},

			//资料库
			toDatabase() {
				uni.navigateTo({
					url: '/pages/database/database'
				})
			},

			//下单维修
			toRepair() {
				if (!uni.getStorageSync('userId')) {
					uni.reLaunch({
						url: '/pages/Sign_in/Sign_in'
					})
				} else {
					// uni.navigateTo({
					// 	url: '/pages/fault_information/fault_information'
					// })
					uni.navigateTo({
						url: '/pages/order_repair/order_repair'
					})
				}

			},

			nato(item) {
				//1.挖机详情页2.资料详情页3.配件详情页4.配件店铺预览5.招聘详情页
				let url = '';
				if (item.navType == 1) {
					url = '/pages/purchase_information_details/purchase_information_details?id=' + item.jumpId
				} else if (item.navType == 2) {
					url = '/pages/information_details/information_details?id=' + item.jumpId
				} else if (item.navType == 3) {
					url = '/pages/sales_details_of_accessories/sales_details_of_accessories?id=' + item.jumpId
				} else if (item.navType == 4) {
					url = '/pages/shop_preview/shop_preview?id=' + item.jumpId
				} else if (item.navType == 5) {
					url = '/pages/recruitment_details/recruitment_details?id=' + item.jumpId
				}
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			}
		}

	}
</script>

<style>
	.pl16 {
		padding-left: 16rpx;
	}

	.pr16 {
		padding-right: 16rpx;
	}

	.menu_content_box_page {
		position: relative;
		/* top: 139rpx; */
		/* height: calc(100vh - 98rpx); */
		background-color: #f7f6f6;
		/* z-index: 2; */
		padding-bottom: 98rpx;
	}

	.search_bg_area {
		/* position: absolute;
    top: 0;
    left: 0; */
		width: 100%;
		padding: 95rpx 0 35rpx;
		height: 333rpx;
		background: #e00e0b;
		z-index: 1;
	}

	.search_box {
		position: relative;
		display: block;
		height: 69rpx;
		line-height: 69rpx;
		color: #333;
		background-color: #fff;
		border-radius: 35rpx;
		overflow: hidden;
		margin-left: 30rpx;
	}

	.search_box .ipt_search {
		display: inline-block;
		width: 100%;
		padding: 0 15rpx 0 88rpx;
		height: 69rpx;
		line-height: 69rpx;
		font-size: 26rpx;
		text-align: left;
		color: #353535;
		outline: none;
		border: none;
		vertical-align: top;
	}

	.icon_search_pos {
		position: absolute;
		top: 21rpx;
		left: 46rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}

	.shop_price_item {
		width: 350rpx;
		background-color: #fff;
		border-radius: 6rpx;
		margin-bottom: 15rpx;
	}

	.shop_price_item .content_area {
		padding: 15rpx 13rpx;
		height: 174rpx;
	}

	.swiper_focus {
		width: 100%;
		height: 320rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;
	}

	.swiper_focus image {
		height: 100%;
		width: 100%;
	}
</style>
